<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/layui/layui.js"></script>
    <link rel="stylesheet" href="../js/layui/css/layui.css">
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo">
            <font color="green">剩余发布次数</font>：<span id="span"></span>
        </div>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item">
                <a href="javascript:;">
                    <img src="http://t.cn/RCzsdCq" class="layui-nav-img">
                    <label th:text="${session.account}"></label>
                </a>
            </li>
            <li class="layui-nav-item"><a href="javaScript:remove()">注销</a></li>
        </ul>
    </div>
    <!-- 左侧导航 -->
    <div class="layui-side layui-bg-black">
        <div class="navBar layui-side-scroll"></div>
    </div>

    <div class="layui-body">
        <!-- 内容主体区域 -->
        <div style="padding: 1px;">
            <div class="layui-tab" lay-filter="myTab" lay-allowclose="true">
                <ul class="layui-tab-title">
                    <li class="layui-this" lay-id="-1">欢迎</li>
                </ul>
                <div class="layui-tab-content" style="height: 100%">
                    <div class="layui-tab-item layui-show">欢迎入学金科教育</div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    var $;
    layui.use(['element'], function(){
        $ = layui.jquery
        var element = layui.element
        //显示左侧菜单
        if($(".navBar").html() == ''){
            $.ajax({
                url:'../zsl/findNavTree',
                async:false,
                type:'post',
                dataType:'json',
                success:function (data) {
                    var _this = this;
                    $(".navBar").html(navBar(data)).height($(window).height()-230);
                    element.init();  //初始化页面元素
                    $(window).resize(function(){
                        $(".navBar").height($(window).height()-230);
                    })
                    // 添加新窗口
                    $(".layui-nav .layui-nav-item a").on("click",function(){
                        //判断当前节点是否是子节点
                        if($(this).children("span").length == 0){
                            //判断选项卡是否被打开过
                            if(!hasTab($(this).find("cite").text())){
                                element.tabAdd('myTab', {
                                    title: '<cite>'+$(this).find("cite").text()+'</cite>'//用于演示
                                    ,content:createFrame($(this).attr("data-url"))
                                    ,id: $(this).attr("data-id")
                                })
                                element.tabChange('myTab', $(this).attr("data-id"));
                            }else{
                                element.tabChange('myTab', $(this).attr("data-id"));
                            }
                        }
                    })
                }
            })
        }
        findCount();
    });

    function findCount() {
        $.ajax({
            url:'../zsl/findCount',
            success:function (data) {
                $("#span").text(data)
            }
        })
    }

    //iframe
    function createFrame(url){
        var h = $(window).height()-200;
        return '<iframe scrolling="auto" frameborder="0"  src="'+ url + '" style="width:100%;height:'+h+'px;"></iframe>';
    }

    //判断选项卡是否打开过
    function hasTab(title){
        var tabIndex = false;
        $(".layui-tab-title li").each(function(){
            if($(this).find("cite").text() == title){
                tabIndex = true;
            }
        })
        return tabIndex;
    }

    /**
     * 动态拼接左侧导航
     * @param data
     * @returns {string}
     */
    function navBar(data){
        var ulHtml = '<ul class="layui-nav layui-nav-tree" lay-filter="myTree">';
        for(var i=0;i<data.length;i++){
            if(data[i].spread){
                ulHtml += '<li class="layui-nav-item layui-nav-itemed">';
            }else{
                ulHtml += '<li class="layui-nav-item">';
            }
            if(data[i].children != undefined && data[i].children.length > 0){
                ulHtml += '<a href="javascript:;" data-id="'+data[i].id+'">';
                if(data[i].icon != undefined && data[i].icon != ''){
                    if(data[i].icon.indexOf("icon-") != -1){
                        ulHtml += '<i class="iconfont '+data[i].icon+'" data-icon="'+data[i].icon+'"></i>';
                    }else{
                        ulHtml += '<i class="layui-icon" data-icon="'+data[i].icon+'">'+data[i].icon+'</i>';
                    }
                }
                ulHtml += '<cite>'+data[i].title+'</cite>';;
                ulHtml += '<span class="layui-nav-more"></span>';
                ulHtml += '</a>'
                ulHtml += '<dl class="layui-nav-child">';
                for(var j=0;j<data[i].children.length;j++){
                    ulHtml += '<dd><a href="javascript:;" data-id="'+data[i].children[j].id+'" data-url="'+data[i].children[j].href+'">';
                    if(data[i].children[j].icon != undefined && data[i].children[j].icon != ''){
                        if(data[i].children[j].icon.indexOf("icon-") != -1){
                            ulHtml += '<i class="iconfont '+data[i].children[j].icon+'" data-icon="'+data[i].children[j].icon+'"></i>';
                        }else{
                            ulHtml += '<i class="layui-icon" data-icon="'+data[i].children[j].icon+'">'+data[i].children[j].icon+'</i>';
                        }
                    }
                    ulHtml += '<cite>'+data[i].children[j].title+'</cite></a></dd>';
                }
                ulHtml += "</dl>"
            }else{
                ulHtml += '<a href="javascript:;" data-id="'+data[i].id+'" data-url="'+data[i].href+'">';
                if(data[i].icon != undefined && data[i].icon != ''){
                    if(data[i].icon.indexOf("icon-") != -1){
                        ulHtml += '<i class="iconfont '+data[i].icon+'" data-icon="'+data[i].icon+'"></i>';
                    }else{
                        ulHtml += '<i class="layui-icon" data-icon="'+data[i].icon+'">'+data[i].icon+'</i>';
                    }
                }
                ulHtml += '<cite>'+data[i].title+'</cite></a>';
            }
            ulHtml += '</li>'
        }
        ulHtml += '</ul>';
        return ulHtml;
    }

    //注销
    function remove() {
        location.href="../company/remove";
    }
</script>
</html>